<template>
  <div id="user-profile">
    <van-form @submit="onSubmit">
      <van-field label="用户" v-model="userForm.id" type="text" readonly/>
      <van-field label="用户" v-model="userForm.name" type="text" placeholder="请输入用户"
                 :rules="[{ pattern: regNamePwd, required: true, message: '无效用户名' }]"/>
      <van-field label="邮箱" v-model="userForm.email" type="email" placeholder="请输入邮箱"
                 :rules="[{ pattern: regEmail, message: '无效邮箱' }]"/>
      <van-field label="电话" v-model="userForm.phone" type="tel" placeholder="请输入电话"
                 :rules="[{ pattern: regPhone, message: '无效手机号码' }]"/>
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="userForm.gender" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field label="昵称" v-model="userForm.nikename" type="text" placeholder="请输入昵称"></van-field>
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead"/>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {getDetailByIdAPI, updateAPI, uploadAvatarAPI} from '@/api/user.js';
import {getUserLocal} from '@/utils/auth.js';
import {Dialog} from "vant";


export default {
  data() {
    return {
      userForm: {
        //表单中的字段名与数据库中用户表的字段名要求一致
        id: null,
        name: '',
        email: '',
        phone: '',
        avatar: '',
        nikename: '',
        gender: 1,
      },
      avatarList: [],
      //规则:字母数字‘6~12
      regNamePwd: /^[a-z0-9]{2,12}$/i,
      regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
      regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    };
  },

  created() {
    let id = getUserLocal().id;
    getDetailByIdAPI(id).then(result => {
      this.userForm = result.data;
      delete this.userForm.password
      this.avatarList = [];
      this.avatarList.push({
        // url: this.APIDomainName + this.userForm.avatar
      });
    });
  },

  methods: {
    //手动处理文件上传
    afterRead(file, detail) {
      file.status = 'uploading';
      file.message = '上传中...';
      uploadAvatarAPI(file, detail).then(result => {
        file.status = '';
        file.message = '';
        //重新生成显示的图片url
        this.avatarList = [];
        this.avatarList.push({
          url: this.APIDomainName + result.url
        });

        //设置用户表中的字段值
        this.userForm.avatar = result.url;
      });
    },

    //处理提交保存
    onSubmit() {
      //注意传递过去的参数user的属性名
      let user = this.userForm;
      updateAPI(user).then(() => {
        Dialog.confirm({
          message: "更新成功",
        })
        this.$router.push({
          name: 'user'
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
::v-deep .van-field__label {
  font-size: 18px;
}

::v-deep .van-field__control {
  font-size: 18px;
}

::v-deep .van-cell {
  padding-bottom: 20px;
  padding-top: 20px;

}
</style>
